<template>
  <div>
    <div style="width: 100%; height: 110px">
      <div
        style="
          color: white;
          border-radius: 10px;
          width: 49%;
          height: 100%;
          float: left;
          background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
        "
      >
        <div style="float: left; color: white; margin-left: 20px">
          <div style="margin-top: 30px">Total Cinemas</div>
          <div style="margin-top: 5px; font-size: 30px">{{ cinemaNumber }}</div>
        </div>
        <OfficeBuilding style="width: 5em; height: 5em; margin-right: 8px" />
      </div>
      <div
        style="
          border-radius: 10px;
          width: 49%;
          height: 100%;
          float: right;
          background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
        "
      >
        <div style="float: left; color: white; margin-left: 20px">
          <div style="margin-top: 30px">Total Movies</div>
          <div style="margin-top: 5px; font-size: 30px">{{ movieNumber }}</div>
        </div>
        <VideoCameraFilled style="width: 5em; height: 5em; margin-right: 8px" />
      </div>
    </div>
    <div style="margin-top: 20px; width: 100%; height: 110px">
      <div
        style="
          border-radius: 10px;
          width: 49%;
          height: 100%;
          float: left;
          background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
        "
      >
        <div style="float: left; color: white; margin-left: 20px">
          <div style="margin-top: 30px">Total Users</div>
          <div style="margin-top: 5px; font-size: 30px">{{ userNumber }}</div>
        </div>
        <User style="width: 5em; height: 5em; margin-right: 8px" />
      </div>
      <div
        style="
          border-radius: 10px;
          width: 49%;
          height: 100%;
          float: right;
          background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
        "
      >
        <div style="float: left; color: white; margin-left: 20px">
          <div style="margin-top: 30px">Total Orders</div>
          <div style="margin-top: 5px; font-size: 30px">{{ orderNumber }}</div>
        </div>
        <Calendar style="width: 5em; height: 5em; margin-right: 8px" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

onMounted(() => {
  getTotalData()
})

const cinemaNumber = ref('')
const movieNumber = ref('')
const userNumber = ref('')
const orderNumber = ref('')

function getTotalData() {
  axios
    .get('/api/count/getCMUOCount')
    .then((res) => {
      cinemaNumber.value = res.data.cinemaCount
      movieNumber.value = res.data.movieCount
      userNumber.value = res.data.userCount
      orderNumber.value = res.data.orderCount
    })
    .catch(() => {
      ElMessage.warning('获取统计数量的数据错误！！！')
    })
}
</script>
